<template>
  <div class="chat-container">
    <van-nav-bar
      class="page-navbar"
      title="智能聊天"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <div class="message-list" ref="message-list">
      <div
        class="message-item"
        :class="{ reverse: index % 2 == 1 }"
        v-for="(item, index) in messages"
        :key="index"
      >
        <van-image class="avatar" round fit="cover" :src="photo(index)" />
        <div class="msg-wrap" style="flex: 1;">
          <div class="title">{{ item }}</div>
        </div>
      </div>
    </div>
    <van-cell-group class="send-message">
      <van-field center clearable v-model="message">
        <van-button slot="button" size="small" @click="onSend" type="primary"
          >发送</van-button
        >
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      messages: getItem('messages') || ['你好'],
      message: '',
      robotPhoto: 'https://i0.hdslb.com/bfs/face/member/noface.jpg@140w_140h_1c.webp'
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {},
  mounted () {
    this.scrollToBottom()
  },
  methods: {
    photo (index) {
      if (index % 2 === 1) {
        return this.user.photo
      }
      return this.robotPhoto
    },
    onSend () {
      this.scrollToBottom()
      const message = this.message.trim()
      if (!message) {
        return
      }
      this.onloadAxios()
      this.messages.push(this.message)
      this.message = ''
    },
    async onloadAxios () {
      try {
        await this.$http(`adaptor/9527?msg=${this.message}`).then(({ data: res }) => {
          if (res.code === 0) {
            this.messages.push(res.data[0].values.text)
          } else {
            this.messages.push('你网咯不好,不想和你说话')
          }
        })
      } catch (error) {
        this.messages.push('报错了，我先躲躲')
      }
      setItem('messages', this.messages)
    },
    scrollToBottom () {
      const messageList = this.$refs['message-list']
      setTimeout(() => {
        messageList.scrollTop = messageList.scrollHeight
      }, 300)
    }
  }
}
</script>

<style scoped lang="less">
.chat-container {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 46px 0 50px 0;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #f5f5f6;
  .message-list {
    height: 100%;
    overflow-y: scroll;
    .message-item {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      padding: 10px;
      .msg-wrap {
        word-break: break-all;
        word-wrap: break-word;
      }
      .title {
        display: table;
        background: #e0effb;
        border-radius: 6px;
        font-size: 14px;
        padding: 10px 10px;
        margin-right: 45px;
      }
      .avatar {
        width: 40px;
        height: 40px;
        margin-right: 5px;
      }
    }
    .reverse {
      flex-direction: row-reverse;
      .msg-wrap {
        display: flex;
        flex-direction: row-reverse;
        .title {
          margin-right: 5px;
          margin-left: 45px;
        }
      }
    }
  }

  .send-message {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f5f6 !important;
  }
}
</style>
